<template>
  <div class="todo-page">
    <h1>📝 我的待办事项</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input :checked="todo.done" type="checkbox"/>
        <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
          {{ todo.title }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {getTodos} from '@/api/todo'

// 定义待办事项的变量
const todos = ref([])

// 页面加载时从后端获取任务数据
onMounted(async () => {
  try {
    const response = await getTodos()
    todos.value = response.data
  } catch (error) {
    console.error('获取任务失败：', error)
  }
})
</script>

<style scoped>
.todo-page {
  padding: 2rem;
}
</style>
